<template>
  <div>
    <div class="home" v-if="desc !== undefined">
      <div class="banner">
        <img :src="banner" alt=""/>
        <a target="_blank" class="qrcode" :href="`ai/open/qrcode/${desc.id}`">
          <svg-icon class="dot" icon-class="qrcode"></svg-icon>
        </a>
        <van-button class="exp" @click="algorithm">算法体验</van-button>
      </div>
      <div class="sections">
        <div v-for="(item, i) in desc.sections" :key="`section_${i}`">
          <div class="content-simple" v-if="item.type === 'simple'">
            <div class="title">{{item.title}}</div>
            <div class="text">{{item.simpleContent}}</div>
          </div>
          <div class="content-with-title" v-else-if="item.type === 'title'">
            <div class="title">{{item.title}}</div>
            <div class="text">
              <div v-for="(si, j) in item.titleContent" :key="`section_${i}_${j}`">
                <div v-if="si.title">
                  <svg-icon class="dot" icon-class="lingxing"></svg-icon>
                </div>
                <div>
                  <p v-if="si.title">{{si.title}}</p>
                  <span>{{si.text}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="content-list" v-else-if="item.type === 'list'">
            <div class="title">{{item.title}}</div>
            <div class="text">
              <div v-for="(si, j) in item.listContent" :key="`section_${i}_${j}`">
                <div>
                  <svg-icon class="dot" icon-class="yuanxing"></svg-icon>
                </div>
                <div>{{si}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div>
          <div>
            <svg-icon
              class="footer_svg footer_svg_left"
              icon-class="footerLine"
            />
          </div>
          <div class="title">规格参数</div>
          <div>
            <svg-icon
              class="footer_svg footer_svg_right"
              icon-class="footerLine"
            />
          </div>
        </div>
        <div>
          <p>调用方式：SDK</p>
          <p>适配系统：Windows、Linux、Android</p>
          <p>支持架构：X86、ARM</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { apiAxios } from '@/api/axios'
import { Algorithm, AlgorithmDesc } from '@/model/algorithm'
import { algorithms } from '@/store/modules/Algorithm'
import { Dialog } from 'vant'

@Component
export default class Description extends Vue {
  desc: AlgorithmDesc = {
    id: '',
    banner: '',
    sections: []
  }

  get banner () : string {
    if (/^\w/.test(this.desc.banner)) {
      return `imgs/${this.desc.banner}.png`
    } else {
      return this.desc?.banner
    }
  }

  get algoId () {
    return this.$store.state.var.activeMenu
  }

  @Watch('algoId')
  async activeMenuUpdated () {
    let algorithm : Algorithm | undefined
    algorithms.list.forEach(group => {
      group.list.forEach(algo => {
        if (algo.id === this.$route.params.id) {
          algorithm = algo
        }
      })
    })
    if (!algorithm) {
      await this.$router.push('/' + algorithms.list[0].list[0].id)
      return
    }

    const res = await apiAxios.get(`/open/algorithm/${this.algoId}/desc`)
    if (res.data) {
      this.desc = res.data
    } else {
      this.desc = {
        id: this.$route.params.id,
        banner: 'banner-AI伦理',
        sections: [
          {
            type: 'simple',
            title: algorithm.title,
            titleContent: [],
            listContent: [],
            simpleContent: algorithm.msg
          }
        ]
      }
    }
  }

  created () {
    let algorithmName = ''
    algorithms.list.forEach(group => {
      group.list.forEach(algorithm => {
        if (algorithm.id === this.$route.params.id) {
          algorithmName = algorithm.title
        }
      })
    })
    if (algorithmName === '') {
      this.$router.push('/' + algorithms.list[0].list[0].id)
    }
  }

  mounted () {
    this.activeMenuUpdated()
    this.$store.state.var.title = ''
  }

  async algorithm () {
    let isDisable = true
    algorithms.list.forEach(algoGroup => {
      algoGroup.list.forEach(algo => {
        if (algo.id === this.$route.params.id) {
          isDisable = !!algo.disable
        }
      })
    })

    if (this.$route.query.force === '1') {
      if (isDisable) {
        console.log('force test')
      }
      isDisable = false
    }
    if (!isDisable) {
      const res = await apiAxios.get(`/open/algorithm/${this.$route.params.id}/exp`)

      if ((res as any).code === 0) {
        await this.$router.push(`/exp/${this.algoId}`)
        return
      }
    }
    Dialog.alert({
      showConfirmButton: true,
      message: '算法升级中，敬请期待。'
    })
  }
}
</script>

<style lang="less" scoped>
.home {
  background: #f8f8f8;
  ul {
    list-style: inside;
  }
  .banner {
    position: relative;
    img {
      width: 100%;
    }
    .qrcode {
      background-color: rgba(0,0,0,0);
      position: absolute;
      border: 0;
      font-size: 1.5rem;
      padding: 0;
      top: 0.5rem;
      right: 1.25rem;
      color: rgba(0, 0, 0, 0.8);
    }
    .exp {
      font-size: 1.25rem;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.8);
      border: 0.06rem solid #ffffff;
      position: absolute;
      bottom: 1.25rem;
      right: 1.25rem;
    }
  }
  .sections>div:not(:first-child) {
    margin-top: 0.75rem;
  }
  .content-simple {
    background: #ffffff;
    width: 100%;
    .title {
      color: #323333;
      text-align: center;
      font-size: 1.25rem;
      padding: 1.25rem 0 0.5rem 0;
      font-family: PingFangSC-Regular,sans-serif;
      height: 2rem;
      line-height: 2rem;
      font-weight: bold;
    }
    .text {
      font-family: PingFangSC-Regular,sans-serif;
      font-size: 0.88rem;
      color: #929292;
      text-align: justify;
      padding: 0 1.25rem 1.25rem 1.25rem;
      line-height: 1.5rem;
    }
  }
  .content-with-title {
    width: 100%;
    background: #ffffff;
    .title {
      color: #323333;
      text-align: center;
      font-size: 1.25rem;
      padding: 1.25rem 0 0.5rem 0;
      font-family: PingFangSC-Regular,sans-serif;
      height: 2rem;
      line-height: 2rem;
      font-weight: bold;
    }
    .text {
      padding: 1.25rem 1.25rem 1.25rem 1.25rem;
      p {
        font-family: PingFangSC-Medium,sans-serif;
        font-size: 1rem;
        color: #323333;
        line-height: 1.25rem;
        margin-bottom: 0.5rem;
        font-weight: bold;
      }
      span {
        font-family: PingFangSC-Regular,sans-serif;
        font-size: 0.88rem;
        color: #929292;
        line-height: 1.5rem;
      }
      & > div:not(:first-child) {
        margin-top: 1rem;
      }
      & > div {
        display: flex;
        & > div:last-child {
          margin-left: 0.25rem;
        }
      }
      .dot {
        width: 0.88rem;
        height: 0.88rem;
      }
    }
  }
  .content-list {
    width: 100%;
    background: #ffffff;
    .title {
      color: #323333;
      text-align: center;
      font-size: 1.25rem;
      padding: 1.25rem 0 0.5rem 0;
      font-family: PingFangSC-Regular,sans-serif;
      height: 2rem;
      line-height: 2rem;
      font-weight: bold;
    }
    .text {
      padding: 0.75rem 1.25rem 1.25rem 1.25rem;
      & > div:not(:first-child) {
        margin-top: 1.5rem;
      }
      & > div {
        display: flex;
        & > div:last-child {
          margin-left: 0.25rem;
        }
      }
    }
  }
  .footer {
    & > div:first-child {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem 0 0.75rem 0;
    }
    .footer_svg {
      width: 4.61rem;
    }
    .footer_svg_right {
      transform: rotate(180deg);
    }
    .title {
      padding: 0 0.76rem;
      font-size: 0.88rem;
      color: #666666;
    }
    P {
      font-family: PingFangSC-Regular,sans-serif;
      font-size: 0.88rem;
      color: #929292;
      line-height: 1.5rem;
    }
    & > div:last-child {
      padding: 0 0 0.38rem 2.38rem;
    }
  }
}
</style>
